import { message } from 'ant-design-vue'
import { defineComponent } from 'vue'
import CopyableIcon from './CopyableIcon.vue'

const Category = defineComponent({
  props: ['icons', 'title', 'newIcons', 'theme'],
  data() {
    return {
      justCopied: null
    }
  },
  methods: {
    onCopied(type, text) {
      message.success(
        <span>
          <code class='copied-code'>{text}</code> copied 🎉
        </span>
      )
      this.justCopied = type
      setTimeout(() => {
        this.justCopied = null
      }, 2000)
    }
  },
  render() {
    const { icons, title, theme, newIcons } = this.$props
    const items = icons.map(name => {
      return (
        <CopyableIcon
          key={name}
          name={name}
          type={name}
          theme={theme}
          isNew={newIcons.indexOf(name) >= 0}
          justCopied={this.justCopied}
          onCopied={this.onCopied}
        />
      )
    })
    return (
      <div>
        <h4>
          {title === "direction"
            ? "方向性图标"
            : title === "suggestion"
            ? "提示建议性图标"
            : title === "editor"
            ? "编辑类图标"
            : title === "data"
            ? "数据类图标"
            : title === "logo"
            ? "品牌和标识"
            : title === "other"
            ? "网站通用图标"
            : "" }
        </h4>
        <ul class={'anticons-list'}>{items}</ul>
      </div>
    )
  }
})

export default Category
